import React from 'react';
import { Card, Form, Divider, Button } from 'antd';
// import {Row, Col, Alert} from 'antd'
import pageTabUtil from '@/utils/pageTabUtil';
import { BottomAction } from '@/components';
import { useAttendanceById } from './hooks';
import { Base, Punch } from './containers';
import styles from './style.less';
import { updateAttendance } from './service';

const Edit = ({ form, location: propsLocation }) => {
    const { query } = propsLocation;
    const [data, loading] = useAttendanceById(query.id);
    const [submitting, setSubmitting] = React.useState(false);

    const update = async payload => {
        setSubmitting(true);
        const { code } = await updateAttendance(payload);
        setSubmitting(false);
        if (code === 10000) {
            pageTabUtil.goBack();
        }
    };

    const handleCancel = () => {
        pageTabUtil.goBack();
    };

    const handleSubmit = () => {
        form.validateFieldsAndScroll(err => {
            if (!err) {
                const { address, location, signWay, locationRange, signLocations, ...rest } = form.getFieldsValue();
                const signConfig =
                    !locationRange && !signLocations ? { signWay } : { signWay, locationRange, signLocations };
                update({ id: query.id, signConfig, ...rest });
            }
        });
    };

    return (
        <Card title="修改考勤设置" style={{ margin: 16 }} loading={loading}>
            <div className={styles.title}>基本信息</div>
            {/* <Row style={{ marginBottom: 16 }}>
                <Col offset={2}>
                    <Alert showIcon message="只需设置参与考勤组的人员，未勾选人员不参与考勤" type="info" closable />
                </Col>
            </Row> */}

            <Base form={form} data={data} />
            <Divider />

            <div className={styles.title}>打卡设置</div>
            <Punch form={form} data={data} />

            <BottomAction>
                <Button onClick={handleCancel}>取消</Button>
                <Button type="primary" onClick={handleSubmit} loading={submitting}>
                    提交
                </Button>
            </BottomAction>
        </Card>
    );
};

export default Form.create({ name: 'Edit' })(Edit);
